<template>
  <a-card
    class="general-card"
    :title="t('routes.dashboard.workplaceSetting.myApproval')"
    v-bind="$attrs"
    :header-style="{ paddingBottom: 0 }"
    :body-style="{
      paddingTop: '20px',
    }"
  >
    <template #extra>
      <a-button type="link" size="small">{{ t('routes.dashboard.more') }}</a-button>
    </template>
    <div ref="chartRef" :style="{ width, height }"></div>
  </a-card>
</template>

<script lang="ts" setup>
  import { Ref, ref, watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { graphic } from 'echarts';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

  const props = defineProps({
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '250px',
    },
  });

  function graphicFactory(side: AnyObject) {
    return {
      type: 'text',
      bottom: '8',
      ...side,
      style: {
        text: '',
        textAlign: 'center',
        fill: '#4E5969',
        fontSize: 12,
      },
    };
  }

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const xAxis = ref<string[]>([
    '2024-03-01',
    '2024-03-02',
    '2024-03-03',
    '2024-03-04',
    '2024-03-05',
    '2024-03-06',
    '2024-03-07',
  ]);
  const chartsData = ref<number[]>([10, 2, 24, 5, 6, 27, 8]);
  const graphicElements = ref([graphicFactory({ left: '2.6%' }), graphicFactory({ right: 0 })]);

  watch(
    () => {
      setOptions({
        grid: {
          left: '2.6%',
          right: '2.6%',
          top: '10',
          bottom: '30',
        },
        xAxis: {
          type: 'category',
          offset: 2,
          data: xAxis.value,
          boundaryGap: false,
          axisLabel: {
            color: '#4E5969',
            // formatter(value: number, idx: number) {
            //   if (idx === 0) return '';
            //   if (idx === xAxis.value.length - 1) return '';
            //   return `${value}`;
            // },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            interval: (idx: number) => {
              if (idx === 0) return false;
              if (idx === xAxis.value.length - 1) return false;
              return true;
            },
            lineStyle: {
              color: '#E5E8EF',
            },
          },
          axisPointer: {
            show: true,
            lineStyle: {
              color: '#23ADFF',
              width: 2,
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          axisLabel: {
            formatter(value: any, idx: number) {
              if (idx === 0) return value;
              return `${value}`;
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#E5E8EF',
            },
          },
        },
        tooltip: {
          trigger: 'axis',
          formatter(params: any) {
            const [firstElement] = params;
            return `<div>
              <p class="tooltip-title">${firstElement.axisValueLabel}</p>
              <div class="content-panel"><span>待审批总数：</span><span class="tooltip-value">${Number(
                firstElement.value,
              ).toLocaleString()}</span></div>
            </div>`;
          },
          className: 'echarts-tooltip-diy',
        },
        graphic: {
          elements: graphicElements.value,
        },
        series: [
          {
            data: chartsData.value,
            type: 'line',
            smooth: true,
            // symbol: 'circle',
            symbolSize: 12,
            emphasis: {
              focus: 'series',
              itemStyle: {
                borderWidth: 2,
              },
            },
            lineStyle: {
              width: 3,
              color: new graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(30, 231, 255, 1)',
                },
                {
                  offset: 0.5,
                  color: 'rgba(36, 154, 255, 1)',
                },
                {
                  offset: 1,
                  color: 'rgba(111, 66, 251, 1)',
                },
              ]),
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(17, 126, 255, 0.16)',
                },
                {
                  offset: 1,
                  color: 'rgba(17, 128, 255, 0)',
                },
              ]),
            },
          },
        ],
      });
    },
    { immediate: true },
  );
</script>

<style lang="less" scoped>
  ::v-deep(.general-card) {
    border-radius: 4px;
    border: none;

    & > .arco-card-header {
      height: auto;
      padding: 20px;
      border: none;
    }

    & > .arco-card-body {
      padding: 0 20px 20px;
    }
  }

  ::v-deep(.echarts-tooltip-diy) {
    background: linear-gradient(
      304.17deg,
      rgb(253 254 255 / 60%) -6.04%,
      rgb(244 247 252 / 60%) 85.2%
    ) !important;
    border: none !important;
    backdrop-filter: blur(10px) !important;

    /* Note: backdrop-filter has minimal browser support */

    border-radius: 6px !important;

    .content-panel {
      display: flex;
      justify-content: space-between;
      padding: 0 9px;
      background: rgb(255 255 255 / 80%);
      width: 164px;
      height: 32px;
      line-height: 32px;
      box-shadow: 6px 0 20px rgb(34 87 188 / 10%);
      border-radius: 4px;
      margin-bottom: 4px;
    }

    .tooltip-title {
      margin: 0 0 10px;
    }

    p {
      margin: 0;
    }

    .tooltip-title,
    .tooltip-value {
      font-size: 13px;
      line-height: 15px;
      display: flex;
      align-items: center;
      text-align: right;
      color: #1d2129;
      font-weight: bold;
    }

    .tooltip-item-icon {
      display: inline-block;
      margin-right: 8px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  }
</style>
